import { FC, useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate, Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { login } from '../../store/slices/authSlice';
import styles from './Login.module.css';

const Login: FC = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const onFinish = async (values: any) => {
    try {
      setLoading(true);
      await dispatch(login(values) as any);
      message.success('登录成功');
      navigate('/home');
    } catch (error: any) {
      message.error(error.message || '登录失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      {/* 左侧宣传区域 */}
      <div className={styles.leftSection}>
        <div className={styles.leftContent}>
          <h1>档案监管系统</h1>
          <p>提供全方位的档案管理与监管服务</p>
          <div className={styles.features}>
            <div className={styles.featureItem}>
              <h3>智能管理</h3>
              <p>高效的档案管理系统，让工作更轻松</p>
            </div>
            <div className={styles.featureItem}>
              <h3>安全可靠</h3>
              <p>严格的权限控制，保障数据安全</p>
            </div>
            <div className={styles.featureItem}>
              <h3>便捷操作</h3>
              <p>友好的用户界面，简单易用</p>
            </div>
          </div>
        </div>
      </div>

      {/* 右侧登录区域 */}
      <div className={styles.rightSection}>
        <div className={styles.loginBox}>
          <h2>用户登录</h2>
          <Form
            name="login"
            onFinish={onFinish}
            autoComplete="off"
            size="large"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input prefix={<UserOutlined />} placeholder="用户名" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="密码" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading} block>
                登录
              </Button>
            </Form.Item>

            <div className={styles.links}>
              <Link to="/register">注册账号</Link>
              <Link to="/forgot-password">忘记密码</Link>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Login; 